/* x轴 */
@keyframes pelletX {
  0% {

  }
  5% {

  }
  10% {
    transform: translateX(12px);
    animation-timing-function:ease-out;
  }
  13% {
    transform: translateX(24px);
    animation-timing-function:ease-in;
  }
  16% {
    transform: translateX(30px);
    animation-timing-function:ease-out;
  }
  19% {
    transform: translateX(36px);
    animation-timing-function:ease-in;
  }
  21% {
    transform: translateX(39px);
    animation-timing-function:ease-out;
  }
  24% {
    transform: translateX(42px);
    animation-timing-function:ease-in;
  }
  50% {
    transform: translateX(140px);
  }
  /* 掉落书签 */
  55% {
    transform: translateX(140px);
  }
  58% {
    transform: translateX(150px);
    animation-timing-function:ease-out;
  }
  61% {
    transform: translateX(160px);
    animation-timing-function:ease-in;
  }
  64% {
    transform: translateX(168px);
    animation-timing-function:ease-out;
  }
  67% {
    transform: translateX(176px);
    animation-timing-function:ease-in;
  }
  70% {
    transform: translateX(182px);
    animation-timing-function:ease-out;
  }
  73% {
    transform: translateX(188px);
    animation-timing-function:ease-in;
  }

  99% {
    transform: translateX(188px);
  }
  100% {
    transform: translateX(984px)
  }
}

/* y轴 */
@keyframes pelletY {
  0% {

  }
  5% {
    transform: translateY(60px);
  }
  10% {
    transform: translateY(54px);
    animation-timing-function:ease-in;
  }
  13% {
    transform: translateY(60px);
    animation-timing-function:ease-out;
  }
  16% {
    transform: translateY(56px);
    animation-timing-function:ease-in;
  }
  19% {
    transform: translateY(60px);
    animation-timing-function:ease-out;
  }
  21% {
    transform: translateY(58px);
    animation-timing-function:ease-in;
  }
  24% {
    transform: translateY(60px);
    animation-timing-function:ease-out;
  }
  50% {
    transform: translateY(60px);
  }
  /* 掉落至书签 */
  55% {
    transform: translateY(114px);
  }
  58% {
    transform: translateY(108px);
    animation-timing-function:ease-in;
  }
  61% {
    transform: translateY(114px);
    animation-timing-function:ease-out;
  }
  64% {
    transform: translateY(110px);
    animation-timing-function:ease-in;
  }
  67% {
    transform: translateY(114px);
    animation-timing-function:ease-out;
  }
  70% {
    transform: translateY(112px);
    animation-timing-function:ease-in;
  }
  73% {
    transform: translateY(114px);
    animation-timing-function:ease-out;
  }

  99% {
    transform: translateY(114px);
  }
  100% {
    transform: translateY(630px)
  }
}

/* 书签动画 */
/* @keyframes wash {
  0% {
    
  }
  50% {
    transform: rotate(4deg)
  }
  100% {
    
  }
} */